<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.flip.min.js"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../resources/easyui/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../resources/js/Util.js"></script>
    <script src="js/hf93.js" type="text/javascript"></script>
    <!-- CSS reset -->
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/tanchang.css"/>
    <!-- Resource style -->
    <script type="text/javascript">
        //判断是否带有参数
        var appId = '';
        var openId = '';
        var tel = '';
        if(document.URL.lastIndexOf("?") > 0) {
            var arr=document.URL.substring(document.URL.lastIndexOf("?")+1, document.URL.length).split("&");
            for(var i=0;i<arr.length; i++)
            {
                if(arr[i].split("=")[0] == 'appId') {
                    appId = arr[i].split("=")[1];
                } else if(arr[i].split("=")[0] == 'openId') {
                    openId = arr[i].split("=")[1];
                } else if(arr[i].split("=")[0] == 'tel') {
                    tel = arr[i].split("=")[1].split("#")[0];
                }
            }
        }

        $(function () {
            if(appId == '' || openId == '' || tel == '') {
                document.body.innerHTML = '请关注内蒙古移动微信号，以指定方式参加活动。';
            }

            $("#viewother").hide();
            $("#repeat").hide();

            setTop50Prize();

            $("#prize li").each(function () {
                var p = $(this);
                p.click(function () {
                    $("#prize li").unbind('click');

                    var data = {
                        appId:appId,
                        openId:openId,
                        tel:tel
                    };

                    $.ajax({
                        type: "POST",
                        url: '/rest/game/end/flop',
                        data: data,
                        success: function (json) {
                            var json = eval('(' + json + ')');
                            if(json.id == "") {
                                prizes = "" + json.details;
                                $("#zjtip").html(prizes);
                                $(".cd-popup-trigger").click();
                            } else {
                                var c = '#666666';   //翻转时的颜色
                                p.css("background-color", c);
                                p.flip({
                                    direction: 'rl', //翻动的方向rl：right to left
                                    content: json.prize, //翻转后显示的内容即奖品
                                    color: c,  //背景色
                                    onEnd: function () { //翻转结束
                                        //p.css({ "font-size": "22px", "line-height": "100px" });
                                        p.css("background", "#4B4640");
                                        p.attr("id", "r"); //标记中奖方块的id
                                        $("#viewother").show(); //显示查看其他按钮
                                        $("#prize li").unbind('click').css("cursor", "default").removeAttr("title");
                                        var id = json.id;
                                        if (id == "0") {
                                            //prizes = json.strPrize;
                                            prizes = "哎呀！手气差一点，看看大奖到底在哪里吧！";
                                            $("#zjtip").html(prizes);
                                        }
                                        else {
                                            prizes = "恭喜您翻到<span>" + json.prizeInfo + "</span>话费，马上分享您的喜悦，让小伙伴们一起来！";
                                            $("#zjtip").html(prizes);
                                        }
                                        $(".cd-popup-trigger").click();
                                        setTimeout(function () {
                                            $("#viewother").click();
                                        }, 4000);
                                        setTimeout(function () {
                                            $("#repeat").click();
                                        }, 12000);
                                    }
                                });
                                $("#data").data("nolist", json.otherPrizes); //保存未中奖信息
                            }
                        }
                    });
                });
            });

            $("#viewother").click(function () {
                var mydata = $("#data").data("nolist"); //获取数据
                var mydata2 = eval(mydata);

                $("#prize li").not($('#r')[0]).each(function (index) {
                    var pr = $(this);
                    var c = '#666666';   //翻转时的颜色
                    pr.css("background-color", c);
                    pr.flip({
                        direction: 'bt',
                        color: c,
                        content: mydata2[index],
                        onEnd: function () {
                            pr.css("background", "#4B4640");
                            $("#viewother").hide();
                            $("#repeat").hide();
                        }
                    });
                });
                $("#data").removeData("nolist");
            });

            $("#repeat").click(function () {
                window.location.reload();
            });


            function getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }

            $("#aTakeRecord").click(function () {
                window.location.href = "takePrize.html?appId=" + appId + "&openId=" + openId;

            });

            $("#aMemberCode").click(function () {
                window.location.href = 'http://mp.weixin.qq.com/s?__biz=MzA4NzQ1NjUxMg==&mid=202708318&idx=1&sn=9575cdcfc6a11e7084f576ea028de08c#rd';

            });

            $("#aShare").click(function () {
                window.location.href = 'http://mp.weixin.qq.com/s?__biz=MzA4NzQ1NjUxMg==&mid=202682304&idx=1&sn=74c08cfa55b004fe189527ab9c9c415b#rd';

            });
        });

        function setTop50Prize() {
            var html='';
            var prizeList = $('#prizeList');
            restClient('/rest/game/top50/flop', function(data){
                html += '<ul id="gundong">';
                for(var o in data) {
                    var tel = data[o].tel;
                    tel = tel.substring(0,3)+"****"+tel.substring(7,11);
                    var result = data[o].result;
                    html += "<li><span>" + tel + "</span>" + result + "    </li>";
                }
                html += '</ul>';
                prizeList.html(html);

                new Scroller('left', '20', 'gundong', 1).start();
            })
        }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div class="aspNetHidden">
    </div>
    <div id="main" class="page">
        <div class="top" id="prizeList">
        </div>
        <div class="ban1">
            <img src="images/ban.jpg" width="100%" /></div>
        <div class="list">
            <ul id="prize">
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);">
                    <img src="images/bgbg.jpg" width="100%" /></a></li>
            </ul>
        </div>
        <div>
            <a href="javascript:void(0)" id="viewother">【翻开其他】</a>
            <a href="javascript:void(0);" id="repeat">【再来一次】</a>
        </div>
        <img src="images/bgdi.jpg" width="100%" />
        <div class="anliu">
            <ul>
                <li><a href="javascript:void(0);" id="aTakeRecord">
                    <img src="images/al1.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);" id="aMemberCode">
                    <img src="images/al2.jpg" width="100%" /></a></li>
                <li><a href="javascript:void(0);" id="aShare">
                    <img src="images/al3.jpg" width="100%" /></a></li>
            </ul>
        </div>
        <div id="data">
        </div>
        <div class="guize">
            <h1>
                活动规则：</h1>
            <p>
                1、添加【内蒙古移动营业厅】公众服务账号，根据提示进入翻牌游戏页面参加翻牌赢话费活动，每个内蒙古移动用户每日可以参加一次，所得话费可累加，直到活动结束。<br />
                2、下载安装【手机营业厅】客户端，点击客户端首页微厅活动广告，获取【升级码】，发送【升级码】至【内蒙古移动营业厅】微信号，每日可额外获得一次翻牌机会，直到活动结束。
            </p>
        </div>
        <div class="guize">
            <h1>
                注意事项：</h1>
            <p style="border: none">
                1、活动期间每位内蒙古移动用户每日可参与一次（升级后每日二次）；<br />
                2、获赠话费2015年1月15日前送出，期间如取消关注，话费不予发放；<br />
                3、全国家庭网用户暂不可参与，敬请谅解。
            </p>
        </div>
        <img src="images/dibu.jpg" width="100%" />
    </div>
    <a href="#0" class="cd-popup-trigger" style="display: none" id="xsTip"></a>
    <div class="cd-popup" role="alert" id="parentdiv">
        <div class="cd-popup-container">
            <div class="tanchuang">
                <img src="images/tc.png" width="300px" />
                <div class="zjnr" id="zjtip">
                    恭喜您抽中<span>0元</span>话费!</div>
                <div class="guanbi" id="guanbi">
                    <a href="javascript:void(0);">
                        <img src="images/xx.png" width="100%" /></a></div>
            </div>
        </div>
    </div>
</form>
</body>
</html>